import React, { useEffect, useState, useRef } from "react"
import { View, Text, Image, Swiper, SwiperItem, Video, Navigator } from "@tarojs/components"
import { navigateTo, createVideoContext, pageScrollTo, useDidShow, useDidHide, login } from "@tarojs/taro"
import "./index.scss"
import NavLayout from "@@/components/layout/nav.layout"
import LiveComp from "@@/components/liveComp/index"
import ActInfo from "@@/components/actInfo/index"
import Highlights from "@@/components/highlights/index"
// const Mudu = require("../../utils/wechat-mudu.min")
import service from "@@/services/data.service"
import userService from "@@/services/user.service"
import { activityIntro, activityIntroDetail, partnerList, menubarType } from "@@/interfaces/api.interface"
import proxy from "../../../config/proxy"
import "taro-ui/dist/style/components/tabs.scss"

const TitleAndLine = (props: { title: string }) => {
	return (
		<View className="titleBox">
			<View className="title">{props.title}</View>
			{/* <View className="line"></View> */}
		</View>
	)
}



const IndexPage = () => {
	const [exhibitionId, setExhibitionId] = useState<number>();
	const [bannerList, setBannerList] = useState<activityIntro[]>([])
	const [imgList, setImgList] = useState<activityIntro[]>([])
	const [newsList, setNewsList] = useState<activityIntro[]>([])
	const [partnerList, setPartnerList] = useState<partnerList[]>([])
	const [listMenubar, setListMenubar] = useState<menubarType[]>([])

	useDidShow(() => {
		pageScrollTo({
			selector: "#diyPage",
			scrollTop: -100
		})
	})
	useEffect(() => {
		init()
	}, [])
	const init = async () => {
		let exhibitionId
		const res = await userService.getExhibitionId()
		// alert(JSON.stringify(res))
		if (res.code === 200) {
			exhibitionId = res.data
			setExhibitionId(exhibitionId)
		}
		//判断h5端是否登录
		// if (TARO_ENV === "h5") {
		// 	if (!getStorageSync("token")) {
		// 	  navigateTo({
		// 	    url: "/pages/mine/mine"
		// 	  })
		// 	}
		// }
		let json = { exhibitionId }

		// 首页菜单权限
		const list = (await service.listMenubar(json)).data
		setListMenubar(list)
		if (list[0].isDel === 0) {
			// 首页banner
			service.getBanner(json).then(rslt => {
				setBannerList(rslt.data)
			})
		}
		if (list[1].isDel === 0) {
			// 精彩片段列表
		}
		if (list[2].isDel === 0) {
			// 活动介绍详情
		}
		//直播
		if (list[3].isDel === 0) {
			// MuduInit()
		}
		if (list[4].isDel === 0) {
			// 精彩瞬间列表
			service.getImg({ exhibitionId, pageSize: 3 }).then(rslt => {
				setImgList(rslt.data.entities)
			})
		}
		if (list[5].isDel === 0) {
			// 新闻资讯列表
			service.getNew({ exhibitionId, pageSize: 4 }).then(rslt => {
				setNewsList(rslt.data.entities)
			})
		}
		if (list[6].isDel === 0) {
			// 合作伙伴列表
			service.getPartner(json).then(rslt => {
				setPartnerList(rslt.data)
			})
		}
	}

	const openPage = (url: string | undefined) => () => {
		if (url) {
			if (TARO_ENV === "h5") {
				location.href = url
			} else if (TARO_ENV === "weapp") {
				navigateTo({
					url: `/pages/outer/outer?link=${url}`
				})
			}
		}
	}
	const goNewDetail = (id: string) => {
		navigateTo({
			url: `/pages/newDetail/newDetail?id=${id}`
		})
	}

	return (
		<NavLayout border leftIconType="chevron-left" title="大华股份" color="#141414" id="indexPage">
			{!!bannerList.length && (
				<Swiper className="banner" indicatorDots indicatorColor='#FFFFFF' indicatorActiveColor='#FF7A7A'>
					{bannerList.map(item => {
						return (
							<SwiperItem key={item.id}>
								<View className="bannerSwipe">
									<Image src={`${proxy.sourceUrl}/${item.imageMobile}`} onClick={openPage(item.url)}></Image>
								</View>
							</SwiperItem>
						)
					})}
				</Swiper>
			)}
			{/* 线上云展banner */}
			<View className="partBox">
				<TitleAndLine title="大华线上云展" />
				<Navigator className="onlineBanner" url={"/pages/smb/smb"}>
					<Image src={require("@@/assets/img/onlineBanner.png")}></Image>
				</Navigator>
				<View className="intro">大华·全行业解决方案3D矩阵</View>
				<Navigator url={"/pages/smb/smb"} className="more">
					<View className="moreArrows">了解详情</View>{" "}
				</Navigator>
			</View>

			{/* 活动介绍 */}
			{!!listMenubar[2] && listMenubar[2].isDel === 0 && exhibitionId && (
				<ActInfo exhibitionId={exhibitionId} />
			)}

			{/* 活动直播  */}
			{!!listMenubar[3] && listMenubar[3].isDel === 0 && (
				<LiveComp />
			)}

			{/* 精彩片段  */}
			{!!listMenubar[1] && listMenubar[1].isDel === 0 && exhibitionId && (
				<Highlights exhibitionId={exhibitionId} />
			)}

			{/* 精彩瞬间  */}
			{!!imgList.length && (
				<View className="partBox">
					<TitleAndLine title="精彩瞬间" />
					<View className="fancyMoment">
						{imgList.map(item => {
							return (
								<View className="fancyImgBox" key={item.id}>
									<Image className="fancyImg" src={`${proxy.sourceUrl}/${item.image}`}></Image>
								</View>
							)
						})}
					</View>
					<Navigator url={"/pages/fancy/fancy"} className="moreFancyImg">
						更多照片
					</Navigator>
				</View>
			)}

			{/* 新闻资讯  */}
			{!!newsList.length && (
				<View className="partBox">
					<TitleAndLine title="新闻资讯" />
					<View className="newsImg">
						<Image src={newsList.length ? `${proxy.sourceUrl}/${newsList[0].image}` : ""}></Image>
					</View>
					<View className="home_newsList">
						{newsList.map(item => {
							return (
								<View className="newsItem" key={item.id} onClick={goNewDetail.bind(this, item.id)}>
									<View className="title">{item.title}</View>
									{/* dangerouslySetInnerHTML={{ __html: item.content }} */}
									<View className="desc">{item.introduction}</View>
								</View>
							)
						})}
					</View>
					<Navigator url={"/pages/news/news"} className="moreFancyImg">
						更多动态
					</Navigator>
				</View>
			)}

			{/* 资讯动态  */}
			{!!partnerList[0] && (
				<View className="partBox">
					<TitleAndLine title="合作伙伴" />
					<View className="partnerList">
						{partnerList.map(item => {
							return (
								<View className="partnerItem" key={item.id}>
									<Image src={`${proxy.sourceUrl}/${item.image}`}></Image>
								</View>
							)
						})}
					</View>
				</View>
			)}
		</NavLayout>
	)
}
export default IndexPage
